<template>
  <div class="zk-el-pool">
    <div v-if="isDisabled && disabledCanLabel" class="disabled-label">
      <el-input :value="dictionaryValue(value)" disabled />
    </div>
    <div v-else-if="isDisabled && disabledCanTimeLabel" class="disabled-label">
      <el-input :value="stringTimerValue(value)" disabled />
    </div>
    <el-input
      v-else-if="option.type === TYPE_ENUM.NUMBER"
      v-model="value"
      :placeholder="`请输入${option.label}`"
      :disabled="isDisabled"
      :size="size"
      :min="option.min"
      :max="option.max"
      :style="option.style || style"
      type="number"
    />
    <el-input
      v-else-if="option.type === TYPE_ENUM.TEXT_AREA"
      v-model="value"
      :placeholder="`请输入${option.label}`"
      :disabled="isDisabled"
      :rows="option.row || 4"
      :size="size"
      :style="option.style || style"
      type="textarea"
    />
    <el-input
      v-else-if="option.type === TYPE_ENUM.PASSWORD"
      v-model="value"
      :placeholder="`请输入${option.label}`"
      :disabled="isDisabled"
      :size="size"
      :style="option.style || style"
      show-password
    />
    <div v-else-if="option.type === TYPE_ENUM.RADIO" style="white-space: nowrap">
      <el-radio
        v-for="opt in options"
        :key="opt.key"
        v-model="value"
        :disabled="isDisabled"
        :size="size"
        :label="opt.key"
        border
      >{{ opt.value }}
      </el-radio>
    </div>
    <el-switch
      v-else-if="option.type === TYPE_ENUM.SWITCH"
      v-model="value"
      :size="size"
      style="display: block"
      :active-color="(option.color||[])[0]"
      :inactive-color="(option.color||[])[1]"
      :active-text="(option.text||[])[0]"
      :inactive-text="(option.text||[])[1]"
    />
    <el-select
      v-else-if="[TYPE_ENUM.SELECT,TYPE_ENUM.SELECT_MULTIPLE].includes(option.type)"
      v-model="value"
      :size="size"
      :style="option.style"
      :disabled="isDisabled"
      :placeholder="`请选择${option.label}`"
      :multiple="option.type === TYPE_ENUM.SELECT_MULTIPLE"
      clearable
    >
      <el-option
        v-for="opt in options"
        :key="opt.key"
        :value="opt.key"
        :label="opt.value"
      />
    </el-select>
    <el-date-picker
      v-else-if="option.type === TYPE_ENUM.DATE"
      v-model="value"
      :disabled="isDisabled"
      :type="option['dateType'] || 'date'"
      :style="option.style"
      :clearable="false"
      :size="size"
      placeholder="选择日期"
      :format="option.format || 'yyyy-MM-dd'"
      :value-format="option.valueFormat || 'yyyy-MM-dd'"
    />
    <el-date-picker
      v-else-if="option.type === TYPE_ENUM.DATE_TIME"
      v-model="value"
      :disabled="isDisabled"
      :type="option['dateType'] || 'datetime'"
      :style="option.style"
      :clearable="false"
      :size="size"
      placeholder="选择日期"
      :format="option.format || 'yyyy-MM-dd HH:mm:ss'"
      :value-format="option.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
    />
    <el-date-picker
      v-else-if="option.type === TYPE_ENUM.DATE_RANGE"
      v-model="rangeValue"
      :disabled="isDisabled"
      :type="option.dateType || 'daterange'"
      :clearable="false"
      :style="option.style"
      :size="size"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :format="option.format || 'yyyy-MM-dd'"
      :value-format="option.valueFormat || 'yyyy-MM-dd'"
      @change="onValueChange"
    />
    <zk-number-range
      v-else-if="option.type === TYPE_ENUM.NUMBER_RANGE"
      v-model="rangeValue"
      :style="option.style"
      :option="option"
      :disabled="isDisabled"
      @onChange="onValueChange"
    />
    <div v-else-if="option.type === TYPE_ENUM.LABEL" style="padding-left: 10px">
      {{ dictionaryValue(value) }}
    </div>
    <el-input
      v-else
      v-model="value"
      :size="size"
      :style="option.style || style"
      :disabled="isDisabled"
      :placeholder="`请输入${option.label}`"
    />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import ZkNumberRange from './components/zk-number-range'
  import moment from 'moment'
  import { TYPE_ENUM } from '@/common/zk-constants'

  const multipleTypes = [TYPE_ENUM.SELECT_MULTIPLE]

  export default {
    name: 'Pool',
    inject: {
      provideDisabled: {
        type: Boolean,
        default: false,
      }
    },
    components: { ZkNumberRange },
    model: {
      prop: 'propValue',
      event: 'onChange',
    },
    props: {
      propValue: {
        type: null,
        default: null,
      },
      option: {
        type: Object,
        default: () => ({}),
      },
      fromValue: {
        type: null,
        default: '',
      },
      toValue: {
        type: null,
        default: '',
      },
      size: {
        type: String,
        default: 'small'
      }
    },
    data() {
      this.isMultiple = multipleTypes.includes(this.option.type)
      const value = this.getValue(this.propValue)
      return {
        value: value,
        rangeValue: [this.fromValue, this.toValue],
        TYPE_ENUM,
        style: { minWidth: '187px' },
      }
    },
    computed: {
      ...mapGetters(['dictionaries']),
      options() {
        const { options, storeKey } = this.option
        return options || this.dictionaries[storeKey] || []
      },
      isDisabled() {
        return this.provideDisabled || this.option.disabled
      },
      disabledCanLabel() {
        return !this.option.type || [
          TYPE_ENUM.INPUT,
          TYPE_ENUM.PASSWORD,
          TYPE_ENUM.NUMBER,
          TYPE_ENUM.NUMBER,
          TYPE_ENUM.TEXT_AREA,
          TYPE_ENUM.SELECT,
        ].includes(this.option.type)
      },
      disabledCanTimeLabel() {
        return [TYPE_ENUM.DATE, TYPE_ENUM.DATE_TIME].includes(this.option.type)
      }
    },
    watch: {
      propValue(newValue) {
        this.value = this.getValue(newValue)
      },
      value(newValue) {
        if (this.isMultiple) {
          this.$emit('onChange', (newValue || []).join(','))
        } else {
          this.$emit('onChange', newValue)
        }
      },
      fromValue(newValue) {
        this.rangeValue = [newValue, this.rangeValue[1]]
      },
      toValue(newValue) {
        this.rangeValue = [this.rangeValue[0], newValue]
      },
    },
    methods: {
      onValueChange(value) {
        const { type, format = '' } = this.option
        if (TYPE_ENUM.DATE_RANGE === type) {
          const v = value.map(e=>moment(e).format(format ? format.toUpperCase() : 'YYYY-MM-DD'))
          this.$emit('onChange', v)
        } else {
          this.$emit('onChange', value)
        }
      },
      getValue(value) {
        return this.isMultiple ? String(value || '').split(',').filter(e => !!e) : value
      },
      dictionaryValue(value) {
        const { options = this.options, storeKey } = this.option
        return storeKey ? (options.find(e => e.key == value) || {}).value || value : value
      },
      stringTimerValue(value) {
        const { type, format } = this.option
        if (value) {
          return moment(value).format(format || type === TYPE_ENUM.DATE_TIME ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD') || ''
        } else {
          return ''
        }
      }
    },
  }
</script>
<style scoped lang="scss">
</style>
